<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="java.util.List , tournoi.modele.Tournoi, tournoi.modele.Equipe"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Tournoi équipes</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/bootstrap.min.css">
        <style>
            body {
                padding-top: 50px;
                padding-bottom: 20px;
            }
        </style>
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="css/main.css">

        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    </head>
    <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index">Gestion de Tournoi</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="admin">Admin menu</a></li>
            <li class="active"><a href="admin?action=menuTournoi">Gérer tournois</a></li>
            <li><a href="admin?action=menuEquipe">Gérer equipes</a></li>
            <li><a href="admin?action=menuArbitre">Gérer arbitres</a></li>
          </ul>
          
          <div class="nav navbar-nav navbar-right navbar-form">
			<a href="admin?action=deconnexion" class="btn btn-danger">
				Déconnexion <span class="glyphicon glyphicon-log-out"></span>
          	</a>
          </div>
        </div><!--/.navbar-collapse -->
      </div>
    </div>
	<!-- ******************** -->
	<!-- ******************** -->
	<!-- CODE INTERESSANT ICI -->
	<!-- ******************** -->
	<!-- ******************** -->   
	<div class="container">
		<% 	Tournoi t = (Tournoi) request.getAttribute("tournoi"); 
			ArrayList<Equipe> le = (ArrayList<Equipe>) request.getAttribute("equipes");
			%>
		<h3>Modification du tournoi : <%=t.getNomTournoi() %></h3>
		<hr>
		<div class="row">
		<% //Message en cas d'action
			String info = (String) request.getAttribute("etat");
			out.write(info); %>
		<form  class="form-horizontal col-sm-5" action="admin?action=modifierTournoi" method="post">
			<div id="formTournoi">
			<!-- Ajout des équipes -->
			<% 	
				int nbEquipes = 2; 
				for(int i = 0; i < 2; i++) { %>
				<div class="form-group">
					<select class="form-control" name="Equipe<%=i %>">
						<option value="">Choisir une équipe</option>
						<% for(Equipe e : le) {  %>
						<option value="<%=e.getId() %>"><%=e.getNomEquipe() %></option>
						<% } %>
					</select>	
				</div>
				
			<% 	} %>
			</div>
		  <div class="form-group">
		  <input type="hidden" name="tournoi" value="<%=t.getIdTournoi() %>"/>
		  	<input type="hidden" id="nbEquipe" name="nbEquipe" value="<%=nbEquipes %>"/>
		    <button id="plusEquipe" data-nombre="2" data-equipe="<%=le.size() %>" datatype="button" class="btn btn-info btn-block">Plus d'équipes</button>
		    <button type="submit" class="btn btn-default btn-block">Modifier le tournoi</button>
		  </div>
		</form>
		</div>
		<a href="admin?action=menuTournoi" class="btn btn-default" role="button">
			<span class="glyphicon glyphicon-chevron-left"></span> Retour
			</a>
		<!-- ************************ -->
		<!-- ************************ -->
		<!-- FIN CODE INTERESSANT ICI -->
		<!-- ************************ -->
		<!-- ************************ -->		

      <hr>
      <footer>
        	<p class="text-muted credit">&copy; Benoît Boyer, Antoine Leguy & Pierre-Antoine Milot 2013</p>
      </footer>
    </div> <!-- /container -->        
    	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>

        <script src="js/vendor/bootstrap.min.js"></script>
        <script src="js/main.js"></script>
        <script type="text/javascript">
        	$("#plusEquipe").bind("click", function() {
				var nb = $("#plusEquipe").attr('data-nombre');
				var equipes = $("#plusEquipe").attr('data-equipe');
				var $parent = $("#formTournoi");
				var nbMax = nb * 2;
				if(nbMax <= equipes) {
					for (var i = nb; i < nbMax; i++) {
						$parent.append('<div class="form-group">'+
								'<select class="form-control" name="Equipe'+i+'">'+
								'<option value="">Choisir une équipe</option>'+
								<% for(Equipe e : le) {  %>
								'<option value="<%=e.getId() %>"><%=e.getNomEquipe() %></option>'+
								<% } %>
							'</select>'+
						'</div>');
					}
					$("#plusEquipe").attr('data-nombre',nbMax);
					$("#nbEquipe").val(nbMax);
				}
				return false;
        	});
        </script>
    </body>
</html>
